<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />		
		<meta name="author" content="朱三元" />
		<meta name="last-edit" content="2021.1.20" />
		<title>单击切换选项卡</title>
		<style type="text/css">
			.main{
				position: absolute;
			}
			.tab {
				margin: 0;
				padding: 0;
				width:500px;
				overflow: hidden;/*overflow 规定当内容溢出时溢出部分隐藏。*/
				list-style-type: none;/*设置无列表样式*/
			}

			.tab li {
				float: left;
				border: solid thin lightgray;
				background: #ddd;
				z-index: 10;
				position: relative;
			}
			.tab li:first-of-type{
				border-radius: 10px 0 0 0;
			}
			.tab li:last-of-type{
				border-radius: 0 10px 0 0;
			}
			.tab li a {
				text-decoration: none;/*text-decoration 添加到文本的装饰效果*/
				color: #000;			    
				display: inline-block;
				width: 120px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}

			#contain1,
			#contain2,
			#contain3,
			#contain4  {
				display: none;   /* 默认都隐藏*/
				width:500px;
				height:200px;
				border:1px solid #ddd;
				position: absolute;
				top:40px;
				padding:10px;
				z-index: 1;
			}

			/*关键部分：哪个是被点击的目标，哪个就显示*/
			/*:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。
			当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
			它需要一个 id 去匹配文档中的 target 。*/
			#contain1:target,
			#contain2:target,
			#contain3:target,
			#contain4:target{
				display: block;
			}

			/*触发变色*/
			/*兄弟选择符 ~*/
			/*E~F{ cssRules } ，CSS3 兄弟选择符(E~F) ，选择 E 元素后面的所有兄弟元素 F*/
			/*E~F 只能选择 E 元素 之后 的 F 元素，所以顺序就显得很重要了*/
			/*CSS3 :nth-child() 选择器*/
			/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*/
			/*n 可以是数字、关键词或公式。*/
			/*通过获得目标的div的兄弟节点中对应序号的元素确定那个选项卡该高亮显示*/
			#contain1:target ~ .tab li:nth-child(1),
			#contain2:target ~ .tab li:nth-child(2),
			#contain3:target ~ .tab li:nth-child(3),
			#contain4:target ~ .tab li:nth-child(4){
				background:white;
				color:black;
				border-bottom:none;
				height:41px;
			}
			.main div li{
				margin:5px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div id="contain1">				
				<ol>
					<li>iPhone 12数据线依旧闪电口，换更耐用的编织线材</li>
					<li>消息称苹果开始量产A14X芯片，为新iPad Pro做准备</li>
					<li>手机储存64G，微信就占20G，为何微信能占那么多空？</li>
					<li>你永远不知道大佬们带着资产跑路的速度有多快</li>
					<li>华为东莞研发实验室起火 现场浓烟滚滚 暂无人员伤亡</li>
					<li>日媒：日本拟提供700亿日元支持国内5G等技术研发</li>
					</ol></div>
			<div id="contain2"><ol>
					<li>修个手机被判两次死刑 ，在特朗普为他求情之后，伊朗冠军被紧急处决</li>
					<li>欧洲大师赛丁俊晖5-2胜艾伦，与塞尔比争四强席位</li>					
					<li>巴特勒与队友赛后抢着背锅，赫罗惨遭皮尔斯嘲讽</li>
					<li>曝同曦接近与哈达迪续约，伊朗老中锋哈达迪或重返CBA</li>
					<li>新赛季体测取消深蹲+卧推，辽篮4人获得免测资格</li>
					<li>德国杯-17岁天才首秀破门罗伊斯复出建功 多特5-0杜伊斯堡</li>
					</ol></div>
			<div id="contain3"><ol>
					<li>美国安部拟议新规，限制留学生等人签证居留期限</li>
					<li>研究生规模越来越大如何保证培养质量？教育部回应</li>
					<li>助力北二外开展＂融知行动＂,团聚力以第二课堂促青年综合素质提升</li>
					<li>助力中小学信息化建设 有道词典笔走入西南这三所重点学校</li>
					<li>达内举办18周年成人礼，打造“学院培训+十年服务”商业新生态</li>
					<li>山东：严格高校新生入学资格复查 严防冒名顶替行为</li>
					</ol></div>
			<div id="contain4"><ol>
					<li>从“英国皇家”走向“美国公路”：异类艺术家佩里的新旅程</li>
					<li>第二届《央美·鲁信全国儿童美术作品大赛》终评结果正式发布</li>
					<li>纪念丨从影半世纪，他是法兰西影坛最具辨识度的面孔之一</li>
					<li>纽约亚洲艺术周，战国青铜琉璃方壶成交五千多万元</li>
					<li>2020北京国际设计周中国传统工艺振兴 主题设计展在中</li>
					<li>高更辞世前的长篇手稿：去哭泣，去痛苦，去欢笑，去生</li>
					</ol></div>			
			<ul class="tab">
				<li><a href="#contain1">科技</a></li>
				<li><a href="#contain2">体育</a></li>
				<li><a href="#contain3">教育</a></li>
				<li><a href="#contain4">文化</a></li>
			</ul>			
		</div>
		<script type="text/javascript">
			document.getElementsByClassName("tab")[0].getElementsByTagName("a")[0].click();
		</script>
	</body>
</html>
